import React,{ Component} from 'react';
import {
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';
import pxToDp from '../config/pxToDp';
import Feather from 'react-native-vector-icons/Feather';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
export default class FindItem extends Component{
    // const
    render(){
        // const { icon } = this.props;
        return(
            <View style={styles.partend}>
                <View style={[styles.icon, this.props.iconBg]}>
                    <MaterialCommunityIcons style={styles.logo} name={this.props.icon} size={18} ></MaterialCommunityIcons>
                </View>
                <View style={[styles.partest,this.props.borderBottom]}>
                    <View style={styles.textTitle}>
                        <Text style={styles.text}>{this.props.text}</Text>
                    </View>
                    <View style={styles.textPlaceholder}>
                        <Text style={styles.textPlaceholderText}>{this.props.placeholder}</Text>
                    </View>
                    <View style={styles.textrightpar}>
                        <Feather name='chevron-right' size={20} style={styles.textright}></Feather>
                    </View>
                </View>
            </View>
            
        )
    }

}

const styles = {
    partend:{
        // flex:1,
        height:45,
        width: pxToDp(640),
        backgroundColor:"#fff",
        flexDirection: 'row', 
        
    },
    icon:{
        width: pxToDp(55),
        height: pxToDp(55),
        alignSelf: 'center',
        marginLeft: 9,
        marginRight: 10,
        // backgroundColor:'rgb(154,210,34)',
        justifyContent: 'center',
        borderRadius: pxToDp(100),
    },
    logo:{
        justifyContent: 'center',
        alignSelf:'center',
        color:'#fff',
    },
    partest:{
        width: pxToDp(545),
        height: 45,
        // justifyContent: 'center',
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderBottomColor: 'rgb(245,245,245)',
        // borderBottomColor :'rgb(245,245,245)',
    },
    partestfalse:{
        width: pxToDp(545),
        height: 45,
        flexDirection: 'row',
    },
    text:{
        color:'rgb(40,40,40)',
        
    },
    textTitle:{
        justifyContent: 'center',
    },
    textPlaceholder:{
        marginLeft:5,
        justifyContent: 'center',
    },
    textPlaceholderText: {
        color: 'rgb(220,220,220)',

    },
    textrightpar:{
        flex:1,
        justifyContent: 'center',
    },
    textright:{
        alignSelf:'flex-end',
    },
}